<span class="top-line total">
  Production:
  <span
    nz-text
    class="monospace qta"
    [nzType]="unit.perSec.gte(0) ? '' : 'danger'"
  >
    {{ unit.perSec | format }}
  </span>
</span>
<span class="top-line">
  Total Production:
  <span class="monospace qta">
    {{ totalProd | format }}
  </span>
</span>
<span class="top-line">
  Total Consumed:
  <span class="monospace qta text-danger">
    {{ totalConsumed | format }}
  </span>
</span>
<span class="top-line" *ngIf="unit.isEnding">
  End in:
  <span class="monospace qta text-danger">
    {{ unit.endIn | time }}
  </span>
</span>

<nz-table
  *ngIf="showTable"
  #sortTable
  nzSize="middle"
  [nzData]="data"
  [nzShowPagination]="false"
  class="prod-table"
>
  <thead>
    <tr>
      <th
        *ngFor="let column of listOfColumns"
        [nzSortOrder]="column.sortOrder"
        [nzSortFn]="column.sortFn"
        [nzSortDirections]="column.sortDirections"
      >
        {{ column.name }}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of sortTable.data">
      <td>{{ data.producer.name }}</td>
      <td>
        <span [class.text-danger]="data.prodPerSec.lt(0)" class="monospace">{{
          data.prodPerSec.times(data.producer.quantity) | format
        }}</span>
      </td>
    </tr>
  </tbody>
</nz-table>
